import Markdown from 'react-markdown';
import styles from './index.less';

interface ChatMessageProps {
  content?: string;
}

export default ({ content }: ChatMessageProps) => {
  return (
    <Markdown
      components={{
        h1: ({ node, ...props }) => <h1 className={styles.h1} {...props} />,
        h2: ({ node, ...props }) => <h1 className={styles.h2} {...props} />,
        h3: ({ node, ...props }) => <h1 className={styles.h3} {...props} />,
        h4: ({ node, ...props }) => <h1 className={styles.h4} {...props} />,
        h5: ({ node, ...props }) => <h1 className={styles.h5} {...props} />,
        h6: ({ node, ...props }) => <h1 className={styles.h6} {...props} />,
        p: ({ node, ...props }) => <p className={styles.paragraph} {...props} />,
        blockquote: ({ node, ...props }) => <blockquote className={styles.blockquote} {...props} />,
        ul: ({ node, ...props }) => <ul className={styles.list} {...props} />,
        a: ({ node, ...props }) => (
          <a className={styles.link} target="_blank" rel="noopener noreferrer" {...props} />
        ),
        //@ts-ignore
        code: ({ node, inline, className, children, ...props }) => (
          <code className={`${styles.code} ${inline ? 'inline-code' : 'block-code'}`} {...props}>
            {children}
          </code>
        ),
        pre: ({ node, ...props }) => <pre className={styles.pre} {...props} />,
        //@ts-ignore
        think: ({ node, ...props }) => (
          <div className={styles.think}>
            {props.children}
          </div>
        ),
      }}
    >
      {content}
    </Markdown>
  );
};
